<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
	</head>

	<body>
		<div class="mui-content" id="form1">
			<div class="mui-input-row mui-search">
	        	<input type="search" id="btnSearch" class="mui-input-clear mui-input" placeholder="搜索">
	        </div>
			<ul class="mui-table-view mui-grid-view" id="btnDefault" style="margin-top: -15px;">
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	            	<div class="mui-media-body">
	            		<a class="mui-btn-link">科技</a>
	            	</div>
	            </li>-->
	            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" v-for="item in keywords">
	                <div class="mui-media-body">
	                	<a class="mui-btn-link" v-html="item">财经</a>
	                </div>
	            </li>
	        </ul>
			
	        <div class="mui-card" v-for="item in news">
				<div class="mui-card-header">
					<label v-html="item.title">标题</label>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner mui-navigate-right" @tap="newdetail(item)" >
						<p v-html="item.content"></p>
						<div style="background:no-repeat;" v-for="url in item.imageUrls">
							<img v-bind:src="url" style="width:100%;display:inline-block;height:auto;" />
						</div>
						<h5>时间：<label v-html="item.publishDateStr"></label> 作者：<label v-html="item.posterScreenName"></label></h5>
					</div>
				</div>
				<div class="mui-card-footer">
					<a id="btnShare" class="mui-icon-extra mui-icon-extra-share" style="font-size: large;">分享</a>
					<a id="btnSave" @tap="saveNew(item)" class="mui-icon-extra mui-icon-extra-heart" style="font-size: large;">收藏</a>
				</div>
			</div>
			<div id="divInfo" style="display: none;text-align: center;">test</div>
		</div>
		<script src="js/mui.min.js" type="text/javascript" ></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/shiquan.app.js"></script>
		<script type="text/javascript">
			var loadData = false;
			var hasNext = false;
			var pageToken = "";
			var vue = new Vue({
				el: '#form1',
				data: {
					keywords:[],//自定义关键字
					news: [] //列表信息流数据
				}
			});
			mui.init({
				pullRefresh: {
					container: '#form1',
					up: {
						height: 50,
						auto: true,
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullupRefresh
					}
				}
			});
			
			var news = [];
			mui.plusReady(function(){
				app.readNews(function(result){
					if(result.state == 1)
						news = result.data;
				});
				var ws=plus.webview.currentWebview();
				ws.setPullToRefresh({support:true,
					height:"50px",
					range:"200px",
					contentdown:{
						caption:"下拉可以刷新"
					},
					contentover:{
						caption:"释放立即刷新"
					},
					contentrefresh:{
						caption:"正在刷新..."
					}
				},function(){
					dataload();
				});
				
				dataload();
				/*默认按钮*/
				mui('#btnDefault').on('tap', 'a', function() {
				    console.log(JSON.stringify(this.innerText));
				    document.getElementById("btnSearch").value = this.innerText;
				    dataload();
				});
				/*搜索按钮*/
				var btnSearch = document.getElementById("btnSearch");
				btnSearch.addEventListener("keypress",function(event) {
				    if(event.keyCode == "13") {
				        document.activeElement.blur();//收起虚拟键盘
				        loadData();
				        event.preventDefault(); // 阻止默认事件---阻止页面刷新
				    }
				});
			});
			function dataload(){
				//alert("dataload");
				setTimeout(function(){
					/*读取关键字*/
					vue.keywords = app.getKeywords();
					//请求列表信息流
					let site = app.getSite();
					var keyword = document.getElementById("btnSearch").value;
					keyword = keyword || app.getKeyword();
					var ajaxUrl = app.SERVERURL+'/news/qihoo?apikey='+app.APIKEY + "&site="+site + "&kw="+keyword;
					console.log(ajaxUrl);
					plus.nativeUI.showWaiting("加载数据，请稍候...");
					mui.ajax(ajaxUrl,{
						data:{},
						dataType:'json',//服务器返回json格式数据
						type:'get',//HTTP请求类型
						timeout:30000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},	              
						success:function(result){
							var cw =plus.webview.currentWebview();
							cw.endPullToRefresh();
							plus.nativeUI.closeWaiting();
							if(result.retcode != "000000"){
								plus.nativeUI.toast("读取失败："+result.message);
								return;
							}
							console.log(JSON.stringify(result));
							hasNext = result.hasNext;
							pageToken = result.pageToken;
							vue.news = result.data;
						},
						error:function(xhr,type,errorThrown){
							var cw =plus.webview.currentWebview();
							cw.endPullToRefresh();
							plus.nativeUI.closeWaiting();
							//异常处理；
							console.log("error:xhr="+xhr+" type="+type + " thrown="+errorThrown);
						}
					});
				},1000);
			}
			function pullupRefresh() {
				setTimeout(function() {
					console.log("hasNext:" + hasNext);
					console.log("pageToken:" + pageToken);
					mui('#form1').pullRefresh().endPullup(hasNext == false); //参数为true代表没有更多数据了。
					if(hasNext == false)
						return;
						
					//请求列表信息流
					let site = app.getSite();
					var keyword = document.getElementById("btnSearch").value;
					keyword = keyword || app.getKeyword();
					var ajaxUrl = app.SERVERURL+'/news/qihoo?apikey='+app.APIKEY + "&site="+site + "&kw="+keyword+"&pageToken="+pageToken;
					console.log(ajaxUrl);
					plus.nativeUI.showWaiting("加载数据，请稍候...");
					mui.ajax(ajaxUrl,{
						data:{},
						dataType:'json',//服务器返回json格式数据
						type:'get',//HTTP请求类型
						timeout:30000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},	              
						success:function(result){
							plus.nativeUI.closeWaiting();
							if(result.retcode != "000000"){
								plus.nativeUI.alert("读取失败："+result.message);
								return;
							}
							console.log(JSON.stringify(result));
							//vue.news = result.data;
							hasNext = result.hasNext;
							pageToken = result.pageToken;
							result.data.forEach(function(item) {
								vue.news.push(item);
							});
						},
						error:function(xhr,type,errorThrown){
							plus.nativeUI.closeWaiting();
							//异常处理；
							console.log("error:xhr="+xhr+" type="+type + " thrown="+errorThrown);
						}
					});
				}, 2000);
			}
			/**
			 * 打开新闻详情
			 * @param {Object} item 当前点击的新闻对象
			 */
			function newdetail(item) {
				mui.openWindow({ 
					url: 'newdetail.html',
					id: 'newdetail',
					extras: {
						title:item.title,
						url: item.url
					}
				});
			}
			/**
			 * 打开新闻详情
			 * @param {Object} item 当前点击的新闻对象
			 */
			function saveNew(item) {
				var isAdd = true;
		  		if(news == undefined){
		  			news = []; 
		  		}
		  		news.forEach(function(data) {
		  			if(item.id == data.id)
		  			{
		  				isAdd = false;
		  				return;
		  			}
				});
				if(isAdd == false){
					plus.nativeUI.toast("保存数据成功！");
					return;
				}
				news.push(item);
				app.saveNews(news,function(result){
					if(result.state != 1){
						plus.nativeUI.alert(result.message);
						return;
					}
					plus.nativeUI.toast("保存数据成功！");
				});
			}
		</script>
	</body>

</html>